<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>小游戏</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#game {
				width: 400px;
				height: 600px;
				border: 2px solid gold;
				padding: 20px;
				margin: 100px auto 0;
			}

			.top {
				height: 50px;
				line-height: 50px;
				display: flex;
				justify-content: space-between;
				font-size: 20px;
			}

			ul {
				list-style: none;
			}

			#question {
				height: 400px;
				font-size: 200px;
				line-height: 400px;
				text-align: center;
			}

			ul {
				display: flex;
				justify-content: space-around;
				height: 150px;
				font-size: 50px;
				align-items: center;
			}

			li {
				/*background-color: red;*/
				height: 50px;
				line-height: 50px;
				font-weight: bolder;
			}


		</style>
	</head>
	<body>

		<div id="game">
			<div class="top">
				<p id="time">
					剩余时间:30s
				</p>
				<p id="score">
					得分:0分
				</p>
			</div>

			<div id="question">
				黄
			</div>

			<ul>
				<li>红</li>
				<li>黄</li>
				<li>蓝</li>
				<li>绿</li>
				<li>黑</li>
			</ul>


		</div>
		
	</body>
</html>
<script>

	// 获取元素
	var timeP = document.getElementById('time');
	var scoreP = document.getElementById('score');
	var questionDiv = document.getElementById('question');
	var ul = document.querySelector('ul');
	var time = 30;
	var score = 0;
	var answer = null;

	// 放文字的数组
	var textArr = ["红", "黄", "蓝", "绿", "黑"];

	// 放颜色的数组
	var colorArr = ["red", "yellow", "blue", "green", "black"];


	function randomNum(m, n) {
		return Math.floor(Math.random() * (n - m + 1) + m);
	}


	// 改变答案
	function changeQuestion() {

		// 随机颜色
		var color = colorArr[randomNum(0, colorArr.length - 1)];

		// 随机文字
		var text = textArr[randomNum(0, textArr.length - 1)];

		questionDiv.style.color = color;
		questionDiv.innerHTML = text;

		switch (color) {
			case "red":
				answer = "红";
				break;
			case "yellow":
				answer = "黄";
				break;
			case "blue":
				answer = "蓝";
				break;
			case "black":
				answer = "黑";
				break;
			case "green":
				answer = "绿";
				break;
			default:
				break;
		}

		// 改变li
		changeLi();

	}

	// console.log(ul.children);

	// 改变li的文字和颜色
	function changeLi() {

		shuffle(colorArr);
		shuffle(textArr);

		// 给li赋值
		for (var i = 0; i < ul.children.length; i++) {
			ul.children[i].style.color = colorArr[i];
			ul.children[i].innerHTML = textArr[i];
		}

	} 

	// shuffle(textArr);
	// console.log(textArr);

	// 洗牌
	function shuffle(arr) {

		for (var i = 0; i < arr.length; i++) {
			// 随机一个数
			var n = randomNum(0, arr.length - 1);

			// 如果n和i相等, 不用交换位置
			// continue 立即结束本次循环
			if (n == i) continue;

			// 交换数组中的两个位置的值
			var temp = arr[i];
			arr[i] = arr[n];
			arr[n] = temp;
		}

	}

	changeQuestion();

	ul.onclick = function(e) {

		// console.dir(e.target);

		// 如果点击的不是li直接返回
		if (e.target.tagName != "LI") return;

		// 回答正确
		if (e.target.innerHTML == answer) {
			// 得分+1
			score++;
			scoreP.innerHTML = "得分:" + score + "分";
		}


		changeQuestion();

	};


	// 倒计时
	var timerID = setInterval(function() {

		time--;

		timeP.innerHTML = "剩余时间:" + time + "s";

		if (time == 0) {
			clearInterval(timerID);
			
			if (!localStorage.bestScore) {
				localStorage.bestScore = score;
			} else {
				localStorage.bestScore = localStorage.bestScore > score ? localStorage.bestScore : score;
			}
			alert("GAME OVER! 历史最高得分:" + localStorage.bestScore + ", 本局得分:" + score);
			location.reload();
		}

	}, 1000);







	




</script>